<template>
  <div id="app">
    <header>
      <h2>Vue Example</h2>       
      <ul>
        <li :class="{active:act==''}"><a href="/" >首页</a></li>
        <li v-for="(v,k) in routes" :class="{active:act==k}"><a :href="'/?act='+k">{{v}}</a></li>
      </ul>
    </header>
    <component v-bind:is="page" class="container"></component>
    <footer>
      <div>
        <span>&copy; Alun 2017</span>
        <span style="float:right">Powered by <a href="https://gitee.com/hylun" target="_blank">Alun</a></span>
      </div>
    </footer>    
  </div>
</template>

<script>
export default {
  data () { 
    return {
      act:'',
      r:location.search.match(/(&|\?)act=([^&]*)(&|$)/i),
      routes:{
        'v-bind': '模板语法',
        'v-if':   '条件语句',
        'v-for':  '循环语句',
        'computed':'计算属性',
        'class-style':'样式绑定',
        'v-on':  '事件绑定',
        'v-model':  '输入绑定',
        'component':'组件',
        'v-focus':'自定义指令',
        'router':'路由',
      }
    } 
  },
  computed: {
    page () {
      var page = {template: '<p style="font-size:30px;margin:100px;">Alun\'s Vue Example</p>'};
      if(this.r && this.r[2] && this.routes[this.r[2]]){
        this.act = this.r[2];
        page = require('./pages/'+this.r[2]+'.vue');        
      }else if(this.r){
        this.act = '404';
        page = {template: '<p style="font-size:60px;margin:100px;color:red;">Page not found!</p>'};
      }
      return page;      
    }
  }  
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50; 
}
header {    
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
}
h1,h2,h3 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 20px;
}

a {
  color: #42b983;
}
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 10px;
}
footer {    
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding: 20px;
}
.active{
  font-weight: bolder;
}
</style>
